feat: data-mageforge attribute handling#189
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Replaces HTML-comment-based inspector markers with data-mageforge-* attributes on the first root element of each rendered block, so block output can be safely embedded inside attribute values (notably PageBuilder URLs) without corrupting markup. Also surfaces a CMS block identifier and adapts the frontend DOM/picker/tabs code to the new attribute-based discovery, including a PageBuilder multi-root fallback.
Changes:
- Backend: inject
data-mageforge-id/data-mageforge-blockJSON via regex on the first opening tag and addcmsBlockIdto metadata. - Frontend DOM: rewrite block discovery to query
[data-mageforge-id], parse JSON metadata, and add a PageBuilder sibling-search fallback. - Frontend UI: render a "CMS Block" section when present, and let the picker still target elements inside
[data-content-type]even when no block was resolved.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/Model/TemplateEngine/Decorator/InspectorHints.php | Switch from comment wrappers to data-attribute injection on the first root tag; add cmsBlockId metadata. |
| src/view/frontend/web/js/inspector/dom.js | Replace TreeWalker comment parsing with attribute-based discovery and add PageBuilder multi-root fallback. |
| src/view/frontend/web/js/inspector/picker.js | Return inspectable target inside [data-content-type] even when no block metadata is resolved. |
| src/view/frontend/web/js/inspector/tabs.js | Carry cmsBlockId through inherited data and render a new "CMS Block" info section. |
* feat: add new color variables and group styles to toolbar CSS; update createMenuItem to accept groupKey * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix: scope purple variable and increase hover specificity for group labels * fix: simplify warning display logic in CompatibilityChecker * fix: rename purple color variable and update groupKey data attribute in toolbar --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces significant improvements to the MageForge Inspector system, focusing on how block metadata is injected, parsed, and interacted with, both on the backend (PHP) and frontend (JavaScript and CSS). The changes move from using HTML comment markers to using data attributes for block metadata, making the inspector more robust, especially when blocks are rendered inside attribute values or complex CMS structures. There are also accessibility and usability enhancements for the inspector UI.
Inspector Metadata Injection and Parsing
data-mageforge-idanddata-mageforge-blockattributes directly on the first root HTML element of each block, ensuring safer and more reliable metadata embedding, especially for content used inside HTML attributes. The metadata is now escaped for HTML attributes using Magento'sEscaperclass, and CMS block IDs are included in the metadata. (InspectorHints.php,InspectorHintsFactory.php) [1] [2] [3] [4]dom.js)Inspector UI and Accessibility Improvements
divwith appropriate ARIA roles and keyboard handling, improving accessibility and avoiding unwanted theme CSS overrides. Keyboard support for activation (Enter/Space) and focus outlines were added for better usability. (inspector.js,inspector.css) [1] [2] [3]inspector.css) [1] [2]Codebase Cleanup and Refactoring
InspectorHints.php,inspector.js,dom.js) [1] [2] [3]InspectorHintsto support dependency injection and instantiation via Magento's object manager. (InspectorHintsFactory.php)Minor Backend Adjustments
CompatibilityCheckCommand.php) [1] [2]Inspector Metadata Injection and Parsing
data-mageforge-*attributes for embedding block metadata, improved HTML safety, included CMS block IDs, and used Magento'sEscaperfor proper encoding. (InspectorHints.php,InspectorHintsFactory.php) [1] [2] [3] [4]dom.js)Inspector UI and Accessibility
divwith ARIA roles, keyboard activation, and improved focus styling for accessibility. (inspector.js,inspector.css) [1] [2] [3]inspector.css) [1] [2]Codebase Cleanup
InspectorHints.php,inspector.js,dom.js) [1] [2] [3]Backend Bugfix
CompatibilityCheckCommand.php) [1] [2]